<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>App用户行为数据分析</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <script type="text/javascript" src="/static/js/vue.min.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body>


<div id="daapp">
    <el-row>
        <el-col :span="12" style="text-align:center;margin-bottom:20px;">
            <div class="grid-content bg-purple">
                <el-date-picker v-model="dateValue1" size="small" type="daterange" value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" @change="changedate1">
                </el-date-picker>
                <div id="main" class="chart-container" style="width:100%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
        <el-col :span="12" style="text-align:center;margin-bottom:20px;">
            <div class="grid-content bg-purple">
                <el-date-picker
                        v-model="nianvalue1"
                        size="small"
                        type="year"
                        placeholder="选择年"
                        @change="changedate2">
                </el-date-picker>
                <el-select v-model="value1" size="small" placeholder="请选择" @change="changedate3">
                    <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div id="main1" class="chart-container" style="width:100%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12" style="text-align:center;margin-bottom:20px;">
            <div class="grid-content bg-purple">
                <el-date-picker
                        v-model="riqivalue1"
                        type="date"
                        placeholder="选择日期"
                        @change="changedate4">
                </el-date-picker>
                <div id="main2" class="chart-container" style="width:100%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
        <el-col :span="12" style="text-align:center;margin-bottom:20px;">
            <div class="grid-content bg-purple">
            </div>
        </el-col>
    </el-row>
</div>
<script>
    new Vue({
        data() {
            return {
                dateValue1: ["{{ start_date }}", "{{ end_date }}"],
                nianvalue1: "{{ year }}",
                riqivalue1: "{{ end_date }}",
                options1: [{
                    value: 'mean',
                    label: '均值'
                }, {
                    value: 'sum',
                    label: '求和'
                }, {
                    value: 'std',
                    label: '标准差'
                }, {
                    value: 'var',
                    label: '方差'
                }, {
                    value: 'sem',
                    label: '均值标准误'
                }],
                value1: 'mean',
            }
        },
        mounted() {
            this.huoqushuju("{{ start_date }}", "{{ end_date }}");
            this.huoqushuju1("{{ year }}", this.value1);
            this.huoqushuju2("{{ end_date }}");
        },
        methods: {
            changedate1(data) {
                this.huoqushuju(new Date(data[0]).toLocaleString().replace(/:\d{1,2}$/, ' '), new Date(data[1]).toLocaleString().replace(/:\d{1,2}$/, ' '));
            }, changedate2(data) {
                this.huoqushuju1(new Date(data).getFullYear(), this.value1);
            }, changedate3(value) {
                this.huoqushuju1((new Date(this.nianvalue1).getFullYear()), value);
            }, changedate4(data) {
                // 确定时间范围之后触发的函数
                this.huoqushuju2(new Date(data).toLocaleString().replace(/:\d{1,2}$/, ' '));
            }, huoqushuju(dater1, dater2) {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=huoyueyonghu&start_date=" + dater1 + "&end_date=" + dater2,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                text: '活跃用户-日期'
                            },
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom.requestFullScreen) { // HTML W3C 提议
                                                chartDom.requestFullScreen()
                                            } else if (chartDom.msRequestFullscreen) { // IE11
                                                chartDom.msRequestFullScreen()
                                            } else if (chartDom.webkitRequestFullScreen) { // Webkit
                                                chartDom.webkitRequestFullScreen()
                                            } else if (chartDom.mozRequestFullScreen) { // Firefox
                                                chartDom.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {},
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: datat.data.shijian
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            series: [
                                {
                                    name: '启动用户',
                                    type: 'line',
                                    data: datat.data.qidongyonghu
                                },
                                {
                                    name: '周活跃用户',
                                    type: 'line',
                                    data: datat.data.zhouhuoyueyonghu
                                },
                                {
                                    name: '月活跃用户',
                                    type: 'line',
                                    data: datat.data.yuehuoyueyonghu
                                },
                                {
                                    name: '月沉默用户',
                                    type: 'line',
                                    data: datat.data.yuechenmoyonghu
                                },
                                {
                                    name: '累计用户',
                                    type: 'line',
                                    data: datat.data.leijiqidongyonghu
                                },
                                {
                                    name: '流失用户',
                                    type: 'line',
                                    data: datat.data.liushiyonghu
                                }
                            ]
                        };
                        option && myChart.setOption(option,true);

                    }
                });
            }, huoqushuju1(dater1, value33) {
                var chartDom1 = document.getElementById('main1');
                var myChart1 = echarts.init(chartDom1);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=nianhuoyueyonghu&year=" + dater1 + "&shuming=" + value33,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                text: '活跃用户-日期'
                            },
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom1.requestFullScreen) { // HTML W3C 提议
                                                chartDom1.requestFullScreen()
                                            } else if (chartDom1.msRequestFullscreen) { // IE11
                                                chartDom1.msRequestFullScreen()
                                            } else if (chartDom1.webkitRequestFullScreen) { // Webkit
                                                chartDom1.webkitRequestFullScreen()
                                            } else if (chartDom1.mozRequestFullScreen) { // Firefox
                                                chartDom1.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom1.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom1.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom1.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom1.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart1.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {},
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: datat.data.shijian
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            series: [
                                {
                                    name: '启动用户',
                                    type: 'line',
                                    data: datat.data.qidongyonghu
                                },
                                {
                                    name: '周活跃用户',
                                    type: 'line',
                                    data: datat.data.zhouhuoyueyonghu
                                },
                                {
                                    name: '月活跃用户',
                                    type: 'line',
                                    data: datat.data.yuehuoyueyonghu
                                },
                                {
                                    name: '月沉默用户',
                                    type: 'line',
                                    data: datat.data.yuechenmoyonghu
                                },
                                {
                                    name: '累计用户',
                                    type: 'line',
                                    data: datat.data.leijiqidongyonghu
                                },
                                {
                                    name: '流失用户',
                                    type: 'line',
                                    data: datat.data.liushiyonghu
                                }
                            ]
                        };
                        option && myChart1.setOption(option,true);

                    }
                });
            }, huoqushuju2(dater1) {
                var chartDom2 = document.getElementById('main2');
                var myChart2 = echarts.init(chartDom2);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=yitianxiaoshihuoyueyonghu&riqi=" + dater1,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                text: '活跃用户-小时'
                            },
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom2.requestFullScreen) { // HTML W3C 提议
                                                chartDom2.requestFullScreen()
                                            } else if (chartDom2.msRequestFullscreen) { // IE11
                                                chartDom2.msRequestFullScreen()
                                            } else if (chartDom2.webkitRequestFullScreen) { // Webkit
                                                chartDom2.webkitRequestFullScreen()
                                            } else if (chartDom2.mozRequestFullScreen) { // Firefox
                                                chartDom2.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom2.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom2.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom2.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom2.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart2.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {},
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: datat.data.shijian
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            series: [
                                {
                                    name: '启动用户',
                                    type: 'line',
                                    data: datat.data.qidongyonghu
                                },
                                {
                                    name: '周活跃用户',
                                    type: 'line',
                                    data: datat.data.zhouhuoyueyonghu
                                },
                                {
                                    name: '月活跃用户',
                                    type: 'line',
                                    data: datat.data.yuehuoyueyonghu
                                },
                                {
                                    name: '月沉默用户',
                                    type: 'line',
                                    data: datat.data.yuechenmoyonghu
                                },
                                {
                                    name: '累计用户',
                                    type: 'line',
                                    data: datat.data.leijiqidongyonghu
                                },
                                {
                                    name: '流失用户',
                                    type: 'line',
                                    data: datat.data.liushiyonghu
                                }
                            ]
                        };
                        option && myChart2.setOption(option,true);
                    }
                });
            },
        }
    }).$mount('#daapp')
</script>

</body>
</html>